<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="../../css/custom.css" media="all">
    <script src="../../js/echarts.min.5.2.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="my-header">图例标记的宽度、高度、每项之间的间隔</div>
                    <div>
                        <p> 设置图例标记的宽度。默认为25</p>
                        <p> 设置图例标记的宽度。默认为25</p>
                        <p> 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10</p>
                        <p style="color: #b6b6b6;">
                            属性：itemGap、itemWidth 、itemHeight</p>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="myEchartsDiv" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var chartDom = document.getElementById('myEchartsDiv');
        var myChart = echarts.init(chartDom);

        /** 主要的就在这里了  @author weijun.wu */
        let customLegend = {
            legend: [
                {
                    orient: 'horizontal',   // 图例列表的布局朝向:horizontal/vertical
                    data: ['系列1', '系列2', '系列3', '系列4', '系列5'],    // 这里是系列series名字的组合，要和系列的名字对应上才能显示。顺序可以自定义。
                    left: 'left',
                    borderColor: '#000000', // 图例的边框颜色。
                    borderWidth: 1, // 图例的边框线宽。

                    itemWidth: 10,  // 设置图例标记的宽度。默认为25
                    itemHeight: 10,  // 设置图例标记的宽度。默认为25
                },
                {
                    orient: 'vertical',   // 图例列表的布局朝向:horizontal/vertical
                    data: ['系列1', '系列2', '系列3', '系列4', '系列5'],    // 这里是系列series名字的组合，要和系列的名字对应上才能显示。顺序可以自定义。
                    left: 'left',
                    top: '60',
                    borderColor: '#B76353', // 图例的边框颜色。
                    borderWidth: 1, // 图例的边框线宽。

                    itemWidth: 30,  // 设置图例标记的宽度。默认为25
                    itemHeight: 10,  // 设置图例标记的宽度。默认为25
                },
                {
                    orient: 'vertical',   // 图例列表的布局朝向:horizontal/vertical
                    data: ['系列1', '系列2', '系列3', '系列4', '系列5'],    // 这里是系列series名字的组合，要和系列的名字对应上才能显示。顺序可以自定义。
                    width: 20,
                    right: '5',
                    top: '20',
                    borderColor: '#B76353', // 图例的边框颜色。
                    borderWidth: 1, // 图例的边框线宽。

                    itemWidth: 30,  // 设置图例标记的宽度。默认为25
                    itemHeight: 10,  // 设置图例标记的宽度。默认为25
                    itemGap: 30,    // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10
                }]
        }

        /** 下面的代码基本都是不变的  @author weijun.wu */
        option = {
            tooltip: {　　//提示信息
                trigger: 'item',
                formatter: function (params) {
                    //设置提示信息的内容
                    return 'Content Category：' + params.name + '<br>City：' + params.seriesName + '<br>Total Handle Time(hr)：' + params.value;
                },
                backgroundColor: '#fff',
                borderRadius: 2,
                textStyle: {　　//设置提示信息的样式
                    color: '#000',
                    fontsize: 12
                }
            },
            grid: {
                left: '23%',
                right: '28%',
                top: '35%',
                bottom: '30%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                name: 'x轴',
                nameTextStyle: {
                    fontWeight: 'bold'
                },
                nameGap: 25,
                bottom: '15%',
                nameLocation: 'center',
                axisLabel: {
                    formatter: function (val) {
                        if (val > 1000) {
                            return val / 1000 + 'K';
                        } else {
                            return val;
                        }
                    }
                },
            },
            yAxis: {
                type: 'category',
                name: 'y轴',
                nameTextStyle: {
                    fontWeight: 'bold'
                },
                data: ['one', 'two', 'three']//[]
            },
            color: ['#2862A6', '#869CB1', '#A0D0AB', '#648A67', '#BEBA5F', '#F88450', '#FCB04E', '#B76353'],
            series: [
                {
                    name: '系列1',
                    stack: '总量',
                    type: 'bar',
                    data: [22, 44, 10],
                },
                {
                    name: '系列2',
                    stack: '总量',
                    type: 'bar',
                    data: [42, 55, 26],
                },
                {
                    name: '系列3',
                    stack: '总量',
                    type: 'bar',
                    data: [16, 33, 75],
                },
                {
                    name: '系列4',
                    stack: '总量',
                    type: 'bar',
                    data: [16, 33, 75],
                },
                {
                    name: '系列5',
                    stack: '总量',
                    type: 'bar',
                    data: [16, 33, 75],
                }
            ]
        };

        Object.assign(option, customLegend)
        option && myChart.setOption(option);
    </script>

    <script src="../../js/tool.js"></script>
    <script>
        init()
    </script>
</body>

</html>